<template>
	<view @click="isMore = false">
		<view class="goods-head" :style="'background:rgba(255,255,255,' + PageScrollTop / 100 + ')'">
			<!-- 返回 -->
			<view class="back" @click="onBack">
				<view class="back-one" :class="{ action: PageScrollTop > 120 }">
					<text></text>
				</view>
			</view>
			<!-- tab切换 -->
			<view class="head-tab" v-if="PageScrollTop > 120">
				<view class="tab" :class="{'action':TabShow===0}" @click="onTab(0)">
					<text>商品</text>
					<text class="line"></text>
				</view>
				<view class="tab" :class="{'action':TabShow===1}" @click="onTab(1)">
					<text>评价</text>
					<text class="line"></text>
				</view>
				<view class="tab" :class="{'action':TabShow===2}" @click="onTab(2)">
					<text>详情</text>
					<text class="line"></text>
				</view>
			</view>
			<!-- 分享更多 -->
			<view class="share-more">
				<view class="share-more-one" :class="{ action: PageScrollTop > 120 }">
					<view class="list" style="background: transparent;">
						
					</view>
					<view class="list" @click.stop="isMore = !isMore">
						<text class="iconfont icon-diandian"></text>
					</view>
				</view>
				<view class="mroe-list" v-show="isMore">
					<navigator class="list">
						<view class="icon">
							<text class="iconfont icon-xiaoxi"></text>
						</view>
						<view class="title">
							<text>消息</text>
						</view>
					</navigator>
					<navigator open-type="switchTab" url="/pages/home/home" class="list">
						<view class="icon">
							<text class="iconfont icon-home"></text>
						</view>
						<view class="title">
							<text>首页</text>
						</view>
					</navigator>
					<navigator class="list">
						<view class="icon">
							<text class="iconfont icon-guanzhu"></text>
						</view>
						<view class="title">
							<text>我的关注</text>
						</view>
					</navigator>
					<navigator class="list">
						<view class="icon">
							<text class="iconfont icon-zuji"></text>
						</view>
						<view class="title">
							<text>浏览记录</text>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<!-- banner，标题 -->
		<view class="banner-title">
			<!-- banner -->
			<view class="banner">
				<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true"
					interval="5000" duration="500">
					<swiper-item v-for="(item, index) in banner" :key="index">
						<image :src="item" mode="aspectFill"></image>
						<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false
            }}" objectFit="cover" wx:if="{{item.type == 'video'}}"></video> -->
					</swiper-item>
				</swiper>
			</view>
			<!-- 价格 -->
			<view class="price-info" v-show="type==0">
				<view class="price">
					<text class="min">￥</text>
					<text class="max">{{dataInfo.price_selling}}</text>
					<text class="original-price" style="font-size: 13px;text-decoration: line-through;color: #bbbaba;margin-left: 5px;">￥{{dataInfo.price_market}}</text>
				</view>
				<view class="info">
					<view class="list" @click="onAttention">
						<text class="iconfont"
							:class="AttentionShow===1?'icon-guanzhu-on action':'icon-guanzhu-off'"></text>
						<text>{{ AttentionShow === 1 ? '已关注' : '关注' }}</text>
					</view>
				</view>
			</view>
			<!-- 限时抢购 -->
			<view class="flash-price" v-show="type==1">
				<view class="price-item">
					<view class="icon-item">
						<text class="iconfont icon-flash-sale"></text>
					</view>
					<view class="price">
						<view class="current-price">
							<text class="min">￥</text>
							<text class="max">99</text>
							<text class="min">.00</text>
						</view>
						<view class="original-price">
							<text>￥149.00</text>
						</view>
					</view>
					<view class="tag">
						<text class="iconfont icon-flash-naozhong"></text>
					</view>
				</view>
				<view class="time-item">
					<view class="title">
						<text>距结束还剩：</text>
					</view>
					<view class="time">
						<text class="num">02</text>
						<text class="dot">:</text>
						<text class="num">46</text>
						<text class="dot">:</text>
						<text class="num">52</text>
					</view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="goods-title">
				<text>{{dataInfo.name}}</text>
			</view>
			<!-- 开通会员 -->
		</view>
	
		<!-- 属性规格 -->
		<view class="goods-discounts">
			<view class="list" @click="getShow(1)">
				<view class="title">已选</view>
				<view class="content">
					<text>{{shop_key}}</text>
				</view>
				<view class="more">
					<text class="iconfont icon-more"></text>
				</view>
			</view>
			<view class="list">
				<view class="title">运费</view>
				<view class="content">
					<text>免运费</text>
				</view>
				<view class="more"><!-- <text class="iconfont icon-more"></text> --></view>
			</view>
		</view>
		<!-- 评价 -->
		<view class="evaluate-data" ref="evaluate">
			<view class="title-more" @click="go_url('/pages/GoodsEvaluateList/GoodsEvaluateList?goods_code='+id)">
				<view class="title">
					<text>评价</text>
				</view>
				<view class="more">
					<text class="iconfont icon-more"></text>
				</view>
			</view>
			<view class="evaluate-list">
				<block  v-for="(item,index) in goods_comment" :key="index" v-if="goods_comment.length!=0">
					<view class="user-info">
						<view class="thumb">
							<image :src="item.user_avatar" mode=""></image>
						</view>
						<view class="nickname-grade">
							<view class="nickname">
								<text>{{item.user_name}}</text>
							</view>
							<view class="grade">
								<text class="cuIcon-favorfill lg text-gray"></text>
							</view>
						</view>
					</view>
					<view class="content">
						<view class="character">
							<text class="two-omit">{{item.content}}</text>
						</view>
						<view class="thumb-list">
							<view class="list" v-for="(imgs,ins) in item.img" :key="ins">
								<image  :src="imgs" mode=""></image>
							</view>
						</view>
					</view>
				</block>
				
				<view class="look-all" @click="go_url('/pages/GoodsEvaluateList/GoodsEvaluateList?goods_code='+id)">
					<text>查看全部评价</text>
				</view>
			</view>
		</view>
		
		<!-- 商品介绍 -->
		<view class="products-introduction" ref="products">
			<view class="title">
				<text>商品介绍</text>
			</view>
			
			<view class="content">
				<jyf-parser :html="dataInfo.content" ref="article"></jyf-parser>
			</view>
		</view>
		<!-- 底部 -->
		<view class="page-footer">
			<view class="footer-fn">
				<!-- <view class="list">
					<text class="iconfont icon-kefu"></text>
					<text>联系客服</text>
				</view> -->
				<view class="list" @click="go_url('/pages/dianpu/dianpu?id='+store.id)">
					<tui-icon name="shop" :size="22" color="#333"></tui-icon>
					<text>店铺</text>
				</view>
				<view class="list" @click="onToCart">
					<text class="iconfont icon-cart"></text>
					<text>购物车</text>
				</view>
			</view>
			<view class="footer-buy">
				<view class="cart-add"  @click="getShow(2)">
					<text>加入购物车</text>
				</view>
				<view class="buy-at"  @click="getShow(3)">
					<text>立即购买</text>
				</view>
			</view>
		</view>
		<!-- 服务弹窗 -->
		<goods-serve ref="GoodsServe"></goods-serve>
		<!-- 优惠券 -->
		<goods-coupon ref="GoodsCoupon"></goods-coupon>
		<!-- 属性规格 -->
		<view class="cu-modal bottom-modal" :class="{'show':isShow}" @click="hide">
		  <view class="cu-dialog">
				<view class="goods-data">
					<view class="thumb">
						<image :src="dataInfo.cover" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text></text>
						</view>
						<view class="price">
							<text class="min">￥</text>
							<text class="max">{{data_xuan.price_selling}}</text>
						</view>
						<view class="inventory">
							<text>库存：{{dataInfo.stock_sales}}</text>
						</view>
					</view>
				</view>
				<view class="attr-size">
					<view class="attr-list" v-for="(item,index) in dataInfo.specs" :key="index">
						<view class="title">
							<text>{{item.name}}</text>
						</view>
						<view class="size-list">
							<div class="list" v-for="(items,ins) in item.list" :key='ins' :class="{'action':items.check}" @click.stop="tabs_index(index,items)">
								<text>{{items.name}}</text>
							</div>
						</view>
					</view>
					<view class="attr-number" @click.stop="onStop">
						<view class="tit">数量</view>
						<view class="number">
							<tui-numberbox :max="99" :min="1" :value="value" @change="change"></tui-numberbox>
						</view>
					</view>
				</view>
				<view class="attr-btn">
					<view class="add-cart" v-if="BuyType === 1" @click="addCat()">加入购物车</view>
					<view class="add-buy" v-if="BuyType === 1" @click="submit()">立即购买</view>
					<view class="confirm" v-if="BuyType === 2 || BuyType === 3" @click="onConfirm(BuyType)">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsServe from '../../components/GoodsServe/GoodsServe.vue';
	import GoodsCoupon from '../../components/GoodsCoupon/GoodsCoupon.vue';

	export default {
		components: {
			GoodsServe,
			GoodsCoupon,
		},
		data() {
			return {
				TabShow: 0,
				isMore: false,
				AttentionShow: 0,
				
				web_content: '<div class="m-img"><img src="https://zhedplus.oss-cn-hangzhou.aliyuncs.com/content_img/20191118/1fb5ff162f25fd4c7383bd998ff2fde9.jpg"><div class="tools" hidden><i class="fa fa-arrow-up move-up"></i><i class="fa fa-arrow-down move-down"></i><em class="move-remove" hidden ><i class="fa fa-times" aria-hidden="true"></i> 移除</em><div class="cover"></div></div></div>',
				PageScrollTop: 0,
				type: 0,
				id:'',
				dataInfo:'',
				dataSpecs:'',
				shop_key:'',
				datas:'',
				data_xuan:'',
				value:1,
				goods_comment:[],
				banner:'',
				store:'',
				isShow:false,
				// 购买类型
				BuyType: 0,
			};
		},
		onLoad(params) {
			this.id = params.id || 0;
		},
		onPageScroll(e) {
			this.PageScrollTop = e.scrollTop;
		},
		onShow() {
			this.getdata()
			// _get.base()
		},
		methods: {
			/**
			 * 返回
			 */
			onBack() {
				uni.navigateBack();
			},
			hide(){
				this.isShow = false;
			},
			change: function(e) {
				this.value = e.value;
			},
			go_url(e){
				this.tui.href(e)
			},
			getShow(e){
				this.BuyType = e
				this.isShow = true
			},
			tabs_index(e,d){
				let that = this
				let shop_key = ''
				that.dataSpecs[e].list.map((item,index)=>{
					if(item.name==d.name){
						item.check = true
					}else{
						item.check = false
					}
				})
				that.dataSpecs.map((item,index)=>{
					item.list.map((items,ins)=>{
						if(items.check){
							items.check = true
							shop_key =shop_key+ item.name+'::'+items.name+";;"
						}
					})
				})
				that.shop_key = shop_key.slice(0, -2)
				that.datas.map((item,index)=>{
					if(that.shop_key==item.goods_spec){
						that.data_xuan = item
					}
				})
				console.log(that.shop_key)
				// that.shop_key = that.datas.dataSpecs[e].name+'::'+
			},
			getdata(){
				let that = this
				let shop_key = ''
				that.tui.request("api.data/getGoods", "POST", {code:that.id}, false, false, true).then((res) => {
					if(res.code==1){
						res.data.specs.map((item,index)=>{
							item.list.map((items,ins)=>{
								if(ins==0){
									items.check = true
									shop_key =shop_key+ item.name+'::'+items.name+";;"
								}else{
									items.check = false
								}
							})
						})
						that.AttentionShow = res.data.is_attention
						that.shop_key = shop_key.slice(0, -2)
						that.dataInfo = res.data
						that.banner =res.data.slider
						that.dataSpecs = res.data.specs
						that.datas = res.data.items
						that.datas.map((item,index)=>{
							if(that.shop_key==item.goods_spec){
								that.data_xuan = item
							}
						})
						that.store = res.data.store
						that.goods_comment = res.data.goods_comment
					}
				}).catch((res) => {
					
				})
			},
			onConfirm(e){
				if(e==2){
					this.addCat()
				}else if(e==3){
					this.submit()
				}
			},
			submit() {
				let that = this
				that.isShow = false;
				let data = that.dataInfo.code+'@'+that.shop_key+'@'+that.value
				that.tui.request("api.auth.order/add", "POST", {items:data}, false, false, false).then((res) => {
					that.tui.toast(res.info)
					if(res.code==1){
						setTimeout(function(){
							that.tui.href('/pages/ConfirmOrder/ConfirmOrder?order_no='+res.data.order_no)
						},1000)
					}
				}).catch((res) => {
					
				})
			},
			addCat(){
				let that = this
				that.isShow = false;
				let data = that.dataInfo.code+'@'+that.shop_key+'@'+that.value
				that.tui.request("api.auth.order/addCart", "POST", {items:data}, false, false, false).then((res) => {
					that.tui.toast(res.info)
					if(res.code==1){
						that.getdata()
					}
				}).catch((res) => {
					
				})
			},
			/**
			 * tab
			 */
			onTab(type) {
				this.TabShow = type;
				switch (type) {
					case 0:
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 300
						});
						break;
					case 1:
						uni.createSelectorQuery().select(".evaluate-data").boundingClientRect((data) => { //data - 各种参数
							uni.pageScrollTo({
								scrollTop: this.PageScrollTop + data.top - 50,
								duration: 300
							});
						}).exec()
						break;
					case 2:
						uni.createSelectorQuery().select(".products-introduction").boundingClientRect((
						data) => { //data - 各种参数
							uni.pageScrollTo({
								scrollTop: this.PageScrollTop + data.top - 50,
								duration: 300
							});
						}).exec()
						break;
				}
			},
			/**
			 * 去购物车
			 */
			onToCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},


			/**
			 * 关注点击
			 */
			onAttention() {
				let that = this
				that.tui.request("api.auth.order/attention", "POST", {code:that.id,type:that.AttentionShow==1?'2':'1'}, false, false, true).then((res) => {
					that.tui.toast(res.info)
					if(res.code==1){
						that.getdata()
					}
				}).catch((res) => {
					
				})
				

			},
			
		}
	};
</script>

<style scoped lang="scss">
	@import 'GoodsDetails.scss';
</style>